<template>
  <div class="pass">
    <!-- 通行证管理 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>突发事件处理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card>
      <div class="sousuo">
        <div>
          <!-- 一个输入框，两个按钮 -->
          <el-button type="info" @click="dorefresh">刷新</el-button>
        </div>

        <div class="search">
          <!-- 一个输入框，两个按钮 -->
          <el-input v-model="searchById" placeholder="请输入事件ID" />
          <el-button type="primary" @click="getEventById"
            >搜索</el-button
          >
        </div>
      </div>
      <!-- 表格 -->
      <el-table :data="eventList">
        <el-table-column prop="master.id" label="事件ID"></el-table-column>
        <el-table-column prop="base.uname" label="住户"></el-table-column>
        <!-- 快速复制某行 alt+shift+剪头 -->
        <el-table-column prop="master.time" label="登记时间"></el-table-column>
        <el-table-column prop="master.title" label="事件名称"></el-table-column>

        <el-table-column label="内容">
          <!-- 可以通过scope.row 拿到当前这一行数据 -->
          <template v-slot="scope">
            <!-- 0 待审核 1通过 2不通过 -->
            <el-button
              type="primary"
              :plain="true"
              @click="detail(scope.row.master.message)"
              >详情</el-button
            >
          </template>
        </el-table-column>

        <el-table-column label="当前状态" prop="master.estatus">
          <!-- 可以通过scope.row 拿到当前这一行数据 -->
          <template v-slot="scope">
            <!-- 0 待审核 1通过 2不通过 -->
            <el-tag v-if="scope.row.master.estatus == 1" type="success"
              >已发布</el-tag
            >
            <el-tag v-if="scope.row.master.estatus == 2" type="warning"
              >已上门处理</el-tag
            >
            <el-tag v-if="scope.row.master.estatus == 0" type="info"
              >未处理</el-tag
            >
          </template>
        </el-table-column>

        <!-- 只有当状态为待审核，也就是0时，才展示两个按钮 -->
        <el-table-column label="操作" width="400px">
          <template v-slot="scope">
            <div v-if="scope.row.master.estatus == 0">
              <el-button
                color="blue"
                @click="
                  pulish(
                    scope.row.base.phone,
                    scope.row.master.time,
                    scope.row.master.title,
                    scope.row.master.message
                  ),
                    changeEventStatus(scope.row.master.id, 1)
                "
                >发布公告</el-button
              >
              <el-button
                color="red"
                @click="changeEventStatus(scope.row.master.id, 2)"
                >上门处理</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="paging"
        background
        layout="prev, pager, next"
        :total="1000"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

  <script>
// getAllPassAPi获取所有通行证 发请求
import { ElMessage } from "element-plus";
import {
  getAllPassAPi,
  deletePassApi,
  changePassStatusApi,
  getUserPassApi,
} from "../api/index.js";
import {
  getAllEventAPI,
  addNoticeApi,
  changeEventStatusApi,
  getEventByIdApi,
} from "../api/index1.js";
export default {
  inject: ["refresh"],
  data() {
    return {
      eventList: [],
      searchById: "",

      formInline: {
        message: "",
        phone: "",
        time: "",
        title: "",
        estatus: "",
      },
    };
  },
  methods: {
    
    changeEventStatus(id, estatus) {
      let obj = {
        id: id,
        estatus: estatus,
      };
      console.log(id + "--" + estatus);
      //       ElMessage({
      //   message: id,
      //   grouping: true,
      //   type: "success",
      // });
      changeEventStatusApi(obj).then((res) => {
        console.log(res);        
        if (res.code == 20000) {
          this.getall();//自动刷新
          ElMessage({
            message: "更新成功",
            type: "success",
          });
        }
      });
    },
    pulish(phone, time, title, message) {
      this.formInline.message = message;
      this.formInline.phone = phone;
      this.formInline.time = time;
      this.formInline.title = title;
      // console.log(this.formInline);
      addNoticeApi(this.formInline).then((res) => {
        console.log(res);
        this.formInline = {};

        // 2.提示用户添加成功
        if (res.code == 20000) {
          ElMessage({
            message: "发布成功",
            type: "success",
          });
        }
        //   this.$router.back()
        this.$router.push("../views/notice");
      });
    },

    detail(msg) {
      // console.log(msg)
      ElMessage({
        message: msg,
        grouping: true,
        type: "success",
      });
    },
    // 1.获取通行证列表的方法
    getall() {
      getAllEventAPI().then((res) => {
        console.log(res);
        this.eventList = res.data;
        // console.log(this.passList)
      });
    },
    // 2.根据id删除通行证
    deletePass(id) {
      deletePassApi(id).then((res) => {
        console.log(res);
        // 1.刷新数据
        this.getPassList();
        // 2.提示用户删除成功
        if (res.code == 20000) {
          ElMessage({
            message: "删除成功",
            type: "success",
          });
        }
      });
    },
    // 3.改变通行证状态
    changeStatus(id, status) {
      console.log(id + status);

      let obj = {
        id: id,
        status: status,
      };
      changePassStatusApi(obj).then((res) => {
        console.log(res);
        if (res.code == 20000) {
          this.getPassList();
          ElMessage({
            message: "更新成功",
            type: "success",
          });
        }
      });
    },
    // 4.搜索
    getEventById() {
      getEventByIdApi(this.searchById).then((res) => {
        console.log(res);
        this.eventList = res.data;
      });
    },
    // 5.重置
    reset() {
      this.searchById = "";
      this.getPassList();
    },
    //6.刷新
    dorefresh(){
      this.refresh()
    }
  },
  created() {
    this.getall();
  },
};
</script>

  <style lang="less" scoped>
.pass {
  .el-breadcrumb {
    margin-bottom: 30px;
  }
}

.search {
  width: 300px;
  display: flex;

  .el-input {
    margin-right: 30px;
  }
}

.operation {
  display: flex;
}

.paging {
  display: flex;
  justify-content: right;
}

.sousuo {
  display: flex;
  justify-content: space-between;
}
</style>
